<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    :width="width + '%'"
     :top="top + 'vh'"
    :before-close="close"
    class="wp-panel"
  >
    <div class="wp-panel-header">
      <div>
        <div class="wp-panel-header__desc">销售订单</div>
        <div>{{ orderInfo.orderNo }}</div>
      </div>
      <div>
      <template v-if="sourceType=='default'">
        <template v-if="orderInfo.status ===0 || orderInfo.status ===2">
        <el-button @click.native="submitOrder(orderInfo.orderNo)" type="success">提 交</el-button>
        <el-button @click.native="cancelOrder(orderInfo.orderNo)" type="warning">取消订单</el-button>
        </template>
        <template v-else-if="orderInfo.status ===1">
          <el-button @click.native="passOrder(orderInfo.orderNo)" type="success">通 过</el-button>
          <el-button @click.native="rejectOrder(orderInfo.orderNo)" type="warning">驳 回</el-button>
        </template>
        <template v-else-if="orderInfo.status ===3">
          <el-button @click.native="completedOrder(orderInfo.orderNo)" type="success">完 成</el-button>
          <el-button @click.native="cancelOrder(orderInfo.orderNo)" type="warning">取消订单</el-button>
        </template>
        </template>
        <el-button @click.native="close" type="danger">关 闭</el-button>
      </div>
    </div>
    <el-descriptions class="header-descriptions-item" direction="vertical" :column="4">
      <el-descriptions-item label="客户名称">{{ orderInfo.customerName||'--' }}</el-descriptions-item>
      <el-descriptions-item label="订单金额">{{ orderInfo.orderAmount||'--' }}</el-descriptions-item>
      <el-descriptions-item label="实际订单金额">{{ orderInfo.orderActualAmount||'--' }}</el-descriptions-item>
      <el-descriptions-item label="订单状态">{{ orderInfo.statusName||'--' }}</el-descriptions-item>
    </el-descriptions>
    <div class="wp-panel-footer">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane :key="k1" name="1">
          <span slot="label"><i class="el-icon-date"></i> 订单信息</span>
          <Base-info :param="orderInfo.orderNo" :orderInfoData.sync="orderInfo" :canModify="canModify" @editAfter="refreshList"/>
        </el-tab-pane>
        <el-tab-pane lazy :key="k2" name="2">
          <span slot="label"><i class="el-icon-date"></i> 产品</span>
          <Product-info :param="orderInfo" :height="300" :isCreate="false" :canModify="canModify" @editAfter="refreshList" :orderActualAmount.sync="orderInfo.orderActualAmount"/>
        </el-tab-pane>
        <el-tab-pane lazy :key="k3" name="3">
           <span slot="label"><i class="el-icon-date"></i> 出库</span>
           <Stock-info :param="orderInfo" :sourceType="sourceType"/>
        </el-tab-pane>
        <el-tab-pane lazy :key="k4" name="4">
           <span slot="label"><i class="el-icon-date"></i> 服务费</span>
           <Service-info :param="orderInfo" :canModify="canModify" :sourceType="sourceType"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>
<script>
import ProductInfo from './detial/productInfo'
import BaseInfo from './detial/BaseInfo'
import StockInfo from './detial/StockInfo'
import ServiceInfo from './detial/ServiceInfo'
import Mixins from './mixins'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: String,
    data: Object,
    sourceType: {type: String, default: 'default'},
    top: { type: Number, default: 2 },
    width: { type: Number, default: 80 }
  },
  components: { ProductInfo, BaseInfo, StockInfo, ServiceInfo },
  mixins: [Mixins],
  watch: {
    show (nVal) {
      this.visible = nVal
    },
    orderInfo: {
      handler (nVal) {
        this.canModify = (nVal.status === 0 || nVal.status === 2) && this.sourceType === 'default'
      }
    }
  },
  data () {
    return {
      visible: this.show,
      activeEdit: false,
      orderInfo: {...this.data},
      canModify: false,
      activeName: '1',
      k1: 1,
      k2: 2,
      k3: 3,
      k4: 4
    }
  },
  methods: {
    handleTabClick (tab, event) {
      if (tab.name === '1') {
        this.k1 = Math.random()
      } else if (tab.name === '2') {
        this.k2 = Math.random()
      } else if (tab.name === '3') {
        this.k3 = Math.random()
      } else if (tab.name === '4') {
        this.k4 = Math.random()
      }
    },
    close () {
      this.$emit('update:show', false)
    },
    refreshList () {
      this.$parent.initPageList()
    },
    submitOrder (orderNo) {
      this.$msgBox.confirm('确认提交销售订单', () => {
        this.requestOption('submitOrder', orderNo, (res) => {
          this.close()
          this.refreshList()
        })
      })
    },
    cancelOrder (orderNo) {
      this.$prompt('请输入取消原因', '取消订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: function (v) {
          if (!v || v === undefined || v === '') {
            return '不能为空'
          }
        }
      }).then(({ value }) => {
        const params = {'orderNo': orderNo, 'failureReason': value}
        this.requestOption('cancelOrder', params, (res) => {
          this.close()
          this.refreshList()
        })
      }).catch(() => {
      })
    },
    passOrder (orderNo) {
      this.$msgBox.confirm('确认订单通过', () => {
        this.requestOption('passOrder', orderNo, (res) => {
          this.close()
          this.refreshList()
        })
      })
    },
    completedOrder (orderNo) {
      this.$msgBox.confirm('确认订单完成', () => {
        this.requestOption('completedOrder', orderNo, (res) => {
          this.close()
          this.refreshList()
        })
      })
    },
    rejectOrder (orderNo) {
      this.$msgBox.confirm('确认驳回订单', () => {
        this.requestOption('rejectOrder', orderNo, (res) => {
          this.close()
          this.refreshList()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
